<template>
<div>
  <div>已选中：{{state.count}}件</div>
  <ul>
    <listItem v-for="item in items" :data="item" :key="item.id" :plus="plusOne" :minus="minusOne"></listItem>
  </ul>
</div>

</template>

<script>
import listItem from './list.item'
export default {
  data () {
    return {
      count: 0,
      items: [],
      state: this.$store.state
    }
  },
  async mounted () {
    try {
      // this.items = (await this.axios('http://localhost:8081/list')).data
      this.items = await (await fetch('http://localhost:8081/list')).json()
    } catch (e) {
      console.log('加载失败')
    }
  },
  methods: {
    plusOne () {
      this.count++
    },
    minusOne () {
      this.count--
    }
  },
  components: {
    listItem
  }
}
</script>

<style>
li {
  text-align: left;
}
</style>
